import React, { useState } from 'react';
import {
  Card,
  Button,
  Space,
  Typography,
  Divider,
  List,
  Switch,
  Input,
  Form,
  message,
  Modal,
  Popconfirm,
  Row,
  Col,
  Avatar,
  Descriptions,
  Tag
} from 'antd';
import {
  LogoutOutlined,
  UserOutlined,
  LockOutlined,
  BellOutlined,
  SecurityScanOutlined,
  SettingOutlined,
  InfoCircleOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Title, Text } = Typography;
const { TextArea } = Input;

const SystemSettings = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [settings, setSettings] = useState({
    notifications: true,
    emailNotifications: false,
    autoSave: true,
    darkMode: false,
    language: 'zh-CN'
  });

  // 退出登录
  const handleLogout = () => {
    Modal.confirm({
      title: '确认退出登录',
      content: '您确定要退出登录吗？',
      icon: <ExclamationCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        setLoading(true);
        // 清除本地存储的用户信息
        localStorage.removeItem('currentUser');
        localStorage.removeItem('token');
        
        message.success('已成功退出登录');
        
        // 延迟跳转到登录页面
        setTimeout(() => {
          navigate('/logins');
        }, 1000);
      }
    });
  };

  // 更新设置
  const handleSettingChange = (key, value) => {
    setSettings(prev => ({
      ...prev,
      [key]: value
    }));
    message.success('设置已更新');
  };

  // 获取当前用户信息
  const getCurrentUser = () => {
    const userData = localStorage.getItem('currentUser');
    return userData ? JSON.parse(userData) : null;
  };

  const currentUser = getCurrentUser();

  const settingsItems = [
    {
      title: '通知设置',
      icon: <BellOutlined />,
      content: (
        <Space direction="vertical" style={{ width: '100%' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Text>系统通知</Text>
            <Switch
              checked={settings.notifications}
              onChange={(checked) => handleSettingChange('notifications', checked)}
            />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Text>邮件通知</Text>
            <Switch
              checked={settings.emailNotifications}
              onChange={(checked) => handleSettingChange('emailNotifications', checked)}
            />
          </div>
        </Space>
      )
    },
    {
      title: '系统设置',
      icon: <SettingOutlined />,
      content: (
        <Space direction="vertical" style={{ width: '100%' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Text>自动保存</Text>
            <Switch
              checked={settings.autoSave}
              onChange={(checked) => handleSettingChange('autoSave', checked)}
            />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Text>深色模式</Text>
            <Switch
              checked={settings.darkMode}
              onChange={(checked) => handleSettingChange('darkMode', checked)}
            />
          </div>
        </Space>
      )
    }
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>系统设置</Title>
      
      <Row gutter={[24, 24]}>
        {/* 用户信息卡片 */}
        <Col xs={24} lg={8}>
          <Card title="用户信息" icon={<UserOutlined />}>
            <div style={{ textAlign: 'center', marginBottom: '16px' }}>
              <Avatar size={64} icon={<UserOutlined />} />
            </div>
            <Descriptions column={1} size="small">
              <Descriptions.Item label="用户名">
                {currentUser?.username || '未知用户'}
              </Descriptions.Item>
              <Descriptions.Item label="角色">
                <Tag color="blue">{currentUser?.role || '未知角色'}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="用户ID">
                {currentUser?.id || '未知'}
              </Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>

        {/* 系统设置卡片 */}
        <Col xs={24} lg={8}>
          <Card title="系统设置" icon={<SettingOutlined />}>
            <List
              dataSource={settingsItems}
              renderItem={(item) => (
                <List.Item>
                  <div style={{ width: '100%' }}>
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                      {item.icon}
                      <Text strong style={{ marginLeft: '8px' }}>
                        {item.title}
                      </Text>
                    </div>
                    {item.content}
                  </div>
                </List.Item>
              )}
            />
          </Card>
        </Col>

        {/* 安全设置卡片 */}
        <Col xs={24} lg={8}>
          <Card title="安全设置" icon={<SecurityScanOutlined />}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Button 
                type="primary" 
                icon={<LockOutlined />}
                block
                onClick={() => message.info('密码修改功能待实现')}
              >
                修改密码
              </Button>
              <Button 
                icon={<InfoCircleOutlined />}
                block
                onClick={() => message.info('系统信息功能待实现')}
              >
                系统信息
              </Button>
            </Space>
          </Card>
        </Col>
      </Row>

      <Divider />

      {/* 退出登录区域 */}
      <Card 
        title="账户操作" 
        style={{ marginTop: '24px' }}
        extra={
          <Popconfirm
            title="确认退出登录"
            description="您确定要退出登录吗？"
            onConfirm={handleLogout}
            okText="确认"
            cancelText="取消"
          >
            <Button 
              type="primary" 
              danger 
              icon={<LogoutOutlined />}
              loading={loading}
            >
              退出登录
            </Button>
          </Popconfirm>
        }
      >
        <Text type="secondary">
          点击右上角的"退出登录"按钮可以安全退出当前账户。退出后需要重新登录才能访问系统。
        </Text>
      </Card>
    </div>
  );
};

export default SystemSettings; 